<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Prediction</title>

	<script type="text/javascript" src="js/handlebars-v4.0.2.js"></script>
	<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
<body>

<script id="prediction-template" type="text/x-handlebars-template">
	<div class="prediction">
		<div class="prediction-title">Make Your Prediction</div>
		<div class="prediction-subtitle">Who do you think will win?</div>
		<div class="prediction-vote">
			<div class="prediction-vote-btn">
				<a class="prediction-vote-btnA button" role="button">
					<span class="prediction-red-name">{{fighter-red-name}}</span>
				</a>
				<a class="prediction-vote-btnB button" role="button">
					<span class="prediction-blue-name">{{fighter-blue-name}}</span>
				</a>
			</div>

			<div class="prediction-forward">
				<a class="facebook" onclick="">
					<img align="absmiddle"
					     src="${locResource}ufc/site_4/images/event/facebook_white.png" alt="facebook">
				</a>
				<a class="twitter" onclick="">
					<img align="absmiddle"
					     src="${locResource}ufc/site_4/images/event/twitter_white.png" alt="twitter">
				</a>
			</div>

		</div>
	</div>
	<!--End of prediction-->
</script>
<script>
	var predictionSource = $("#prediction-template").html();
	var predictionTemplate = Handlebars.compile(predictionSource);
	var predictionContext = {
		fighterRedName: "My New Post",
		fighterBlueName: "This is my first post!"
	};
	var predictionHtml = predictionTemplate(predictionContext);
	$('body').append(predictionHtml);

</script>
</body>
</html>